<template>
<div class="container">
  <div class="tabs">
    <YB-tabs>
      <div class="tab_item" data-type="customItem" v-for="i in 15" :key="i" @click="changeSelectItem(i)">子元素{{i}}</div>
    </YB-tabs>
  </div>
</div>
</template>

<script setup>
import YBTabs from '@/components/YB_Tabs/index.vue'
const changeSelectItem = (e) => {
  console.log(e);
}
</script>

<style scoped lang="scss">
.container{
  padding-top: 50px;
}
.tabs{
  border-bottom: 1px solid #E9ECF0;
}
.tab_item{
  padding:5px 10px;
  background: #FFFFFF;
  border-radius: 4px 4px 0 0;
  border: 1px solid #E9ECF0;
  border-bottom: none;
  text-align: center;
  line-height: 32px;
  &:not(:nth-last-child(1)){
    margin-right: 8px;
  }
}
</style>